<template>
  <div style="padding:30px;">

    <div class="module-filter">
      <span class="item-filter">
        预约号：
        <el-input
          placeholder="请输入预约号"
          v-model="search.sn"
          clearable>
        </el-input>
      </span>
      <span class="item-filter">
        销售单号：
        <el-input
          placeholder="请输入销售单号"
          v-model="search.selfNumber"
          clearable>
        </el-input>
      </span>
      <span class="item-filter">
        车牌号：
        <el-input
          placeholder="请输入车牌号"
          v-model="search.carNo"
          clearable>
        </el-input>
      </span>
      <span class="item-filter">
        预约状态：
        <el-select v-model="search.bookStatus" placeholder="请选择预约状态">
          <el-option
            v-for="item in bookStatusAttr"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </span>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
    </div>
    <div class="module-action">
      <el-button icon="el-icon-document-add" type="primary" plain @click="handleAddEdit('add')">新增</el-button>
      <el-button icon='el-icon-document-checked' type="primary" v-show="curStatus=='3900'" plain>确认</el-button>
      <el-button type="primary" v-show="curStatus=='3901'" plain>派工</el-button>
      <el-button type="primary" v-show="curStatus=='3902'" plain>改派</el-button>
      <el-button icon='el-icon-document-checked' type="primary" v-show="imgYuyue.length>0" plain>预约图片({{imgYuyue.length}})</el-button>
      <el-button icon='el-icon-document-checked' type="primary" v-show="imgFinish.length>0" plain>完工图片({{imgFinish.length}})</el-button>
      <el-button type="primary" plain>查看详情</el-button>
      <el-button type="primary" plain>导出</el-button>
    </div>
    <el-table
      :data="tableData"
      border
      ref="singleTable"
      highlight-current-row
      @current-change="handleSelected"
      style="width: 100%;margin: 0 0 20px;font-size: 14px">
      <el-table-column
        prop="name"
        label="wx名称">
      </el-table-column>
      <el-table-column
        prop="name"
        label="昵称">
      </el-table-column>
      <el-table-column
        prop="isDing"
        label="是否关注">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄">
      </el-table-column>
      <el-table-column
        prop="city"
        label="所在城市">
      </el-table-column>
      <el-table-column
        prop="date"
        label="关注日期">
      </el-table-column>
      <el-table-column
        prop="date"
        label="创建日期">
      </el-table-column>
    </el-table>
    <span class="total">总共：{{total}}条</span>
    <el-pagination
      style="display: inline-block;vertical-align: middle"
      background
      @current-change="handleCurrentChange"
      layout=" prev, pager, next"
      :total="total">
    </el-pagination>

    <!-- 新增修改弹出框 -->
    <el-dialog title="新增" :visible.sync="addEditVisible" width="30%">
      <!--<VisibleAddEdit @closeVisible="addEditVisible=false"></VisibleAddEdit>-->
    </el-dialog>
  </div>
</template>

<script>
  import { getList } from '@/api/dispatching'
  import axios from 'axios'

  //  import VisibleAddEdit from './components/car-add-edit.vue'
  export default{
    components:{
//      VisibleAddEdit
    },
    data(){
      return{
        curStatus:-1,
        bookStatusAttr:[
          {
            value:'',
            label:'全部'
          },{
            value:'3900',
            label:'未操作'
          },{
            value:'3901',
            label:'已确认'
          },{
            value:'3902',
            label:'已派单'
          },{
            value:'3903',
            label:'维修中'
          },{
            value:'3904',
            label:'已完成'
          },{
            value:'3905',
            label:'已取消'
          },
        ],
        imgYuyue:[],
        imgFinish:[],
        search:{
          sn:'',
          selfNumber:'',
          carNo:'',
          bookStatus:'',
        },
        tableData:[],
        total:0,
        page:1,
        rows:10,
        addEditForm:{},
        addEditVisible:false,
      }
    },
    mounted (){

      this.tableData = this.$mock.mock({
        // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
        'list|10': [{
          'name': '@cname', //中文名称
          'age|1-100': 100, //100以内随机整数
          'birthday': '@date("yyyy-MM-dd")', //日期
          'city': '@city(true)', //中国城市
          'isDing|1': ['是','否'], //是否订阅
          'date': '@date("yyyy-MM-dd")', //日期
        }]
      }).list

      console.log(this.tableData,1111)
      this.getData();
    },
    methods:{
      getData(){},

      handleSearch(){
        this.getData();
      },
      handleSelected(val){
        this.curStatus=val.bookStatusDesc;
        this.imgYuyue=[];
        this.imgFinish=[];
        for(var i=0;i<val.uploads.length;i++){
          if(val.uploads[i].fileType==0){
            this.imgYuyue.push(val.uploads[i])
          }else{
            this.imgFinish.push(val.uploads[i])
          }
        }
        console.log(val,123)
      },
      handleCurrentChange(val){
        getList({page:val,rows:this.rows}).then(res => {
          this.tableData=res.rows;
        this.total=res.total;
      }).catch(error => {
          console.log(res,111)
      })
      },
      handleAddEdit(type){
        this.addEditVisible=true;
      }
    }
  }
</script>
<style>
  .total{
    display: inline-block;
    vertical-align: middle;
    font-size: 15px;
    color: #666;
  }
  .module-filter{
    margin:0 0 20px;
    padding:24px;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.05);
  }
  .module-filter .item-filter{
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    padding-right: 12px;
  }
  .module-filter .item-filter .el-input{
    display: inline-block;
    vertical-align: middle;
    width: 170px;
  }
  .module-filter .item-filter .el-input__inner{
    padding: 0 10px;
  }
  .module-filter .item-filter .el-select .el-input{
    width: 110px;
  }
  .module-action{
    padding:0 0 18px;
  }
  .module-action .el-button{
    padding:10px;
    font-size: 13px;
  }
  .module-action .el-button i{
    font-size: 16px;
  }
  .el-table__row{
    cursor: pointer;
  }
  .el-table__body tr.current-row>td{
    background: #b3d8ff;
    /*color: #fff;*/
  }
</style>
